<template>
  <div>
    <el-upload
      v-show="!isShowProgress"
      action="#"
      :class="{ display: fileList.length }"
      list-type="picture-card"
      :file-list="fileList"
      :on-remove="onRemove"
      :http-request="onRequest"
      :on-change="onChange"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeUpload"
      accept="image/png, image/jpeg, image/gif"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="isShowProgress" type="circle" :percentage="percentage" />
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// console.log(COS)
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
  SecretId: 'AKID4yc1A2g4A0Zrtd6JFtGNCk11kDPL0OVL',
  SecretKey: 'bvxiCQM1PXOikY5MM5XicFbgU0GFxNWP'
})
// SecretId: AKID4yc1A2g4A0Zrtd6JFtGNCk11kDPL0OVL

// SecretKey: bvxiCQM1PXOikY5MM5XicFbgU0GFxNWP
export default {
  name: 'UploadImag',
  data () {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      currentUid: '',
      percentage: 0,
      isShowProgress: false
    }
  },
  props: {
    imgurl: {
      type: Object
    }
  },
  created () {
    this.loadImg()
  },
  methods: {
    onRemove (file, fileList) {
      this.fileList = fileList
    },
    onRequest (data) {
      cos.putObject(
        {
          Bucket: 'hz-hrsaas-22-1307760707' /* 必须 */,
          Region: 'ap-shanghai' /* 存储桶所在地域，必须字段 */,
          Key: data.file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: data.file, // 上传文件对象
          onProgress: progressData => {
            console.log(JSON.stringify(progressData))
            this.percentage = progressData.percent * 100
          }
        },
        (err, data) => {
          if (err) {
            this.$message.error('上传失败')
            this.isShowProgress = false
            this.fileList = this.fileList.filter(
              item => item.uid !== this.currentUid
            )
          }
          if (!err && data.statusCode === 200) {
            const url = 'https://' + data.Location
            this.$emit('imgURL', url)
            const index = this.fileList.findIndex(item => {
              return item.uid === this.currentUid
            })
            this.isShowProgress = false
            this.fileList[index].url = url
          }
        }
      )
    },
    onChange (file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUpload (file) {
      const maxSize = 1 * 1024 * 1024
      if (file.size >= maxSize) {
        this.$message.error('请上传1MB以下图片')
        return false
      }
      this.currentUid = file.uid
      this.isShowProgress = true
      return true
    },
    loadImg () {
      if (this.imgurl.img) {
        this.fileList = []
        this.fileList.push({ url: this.imgurl.img })
      }
    }
  },
  watch: {
    imgurl: {
      deep: true,
      handler () {
        this.loadImg()
      }
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .upload_img {
  width: 100px;
  height: 60px;
}
/deep/ .display .el-upload--picture-card {
  display: none;
}
/deep/ .el-upload {
  width: 100px;
  height: 60px;
  line-height: 70px;
  i {
    font-size: 20px;
  }
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 60px;
  margin: 0;
}
/deep/ .el-progress {
  width: 50px;
  height: 50px;
  svg {
    width: 50px;
    height: 50px;
  }
}
</style>
